<script setup lang="ts">
import {ElDropdown, ElDropdownMenu, ElDropdownItem, ElMessageBox} from 'element-plus'
import {useI18n} from '@/hooks/web/useI18n'
import {useStorage} from '@/hooks/web/useStorage'

const {getStorage} = useStorage()

import {resetRouter} from '@/router'
import {useRouter} from 'vue-router'
import {useDesign} from '@/hooks/web/useDesign'
import {useTagsViewStore} from '@/store/modules/tagsView'
import LockDialog from './components/LockDialog.vue'
import {ref, computed} from 'vue'
import LockPage from './components/LockPage.vue'
import {useLockStore} from '@/store/modules/lock'
const  username = getStorage('userInfo').realname

const lockStore = useLockStore()

const getIsLock = computed(() => lockStore.getLockInfo?.isLock ?? false)

const tagsViewStore = useTagsViewStore()

const {getPrefixCls} = useDesign()

const prefixCls = getPrefixCls('user-info')

const {t} = useI18n()

const {clear} = useStorage()

const {replace} = useRouter()

const loginOut = () => {
  ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  })
      .then(async () => {
        clear()
        tagsViewStore.delAllViews()
        resetRouter() // 重置静态路由表
        replace('/login')
        // window.location.href = '/login'
      })
      .catch(() => {
      })
}

const dialogVisible = ref<boolean>(false)

// 锁定屏幕
const lockScreen = () => {
  dialogVisible.value = true
}

const toDocument = () => {
  window.open('https://element-plus-admin-doc.cn/')
}
</script>

<template>
  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
    <div class="flex items-center">
      <img
          src="@/assets/imgs/avatar.jpg"
          alt=""
          class="w-[calc(var(--logo-height)-25px)] rounded-[50%]"
      />
      <span class="<lg:hidden text-14px pl-[5px] text-[var(--top-header-text-color)]">{{username}}</span>
    </div>
    <template #dropdown>
      <ElDropdownMenu>
        <!-- <ElDropdownItem>
          <div @click="toDocument">{{ t('common.document') }}</div>
        </ElDropdownItem> -->
        <ElDropdownItem divided>
          <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
        </ElDropdownItem>
        <ElDropdownItem>
          <div @click="loginOut">{{ t('common.loginOut') }}</div>
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>

  <LockDialog v-if="dialogVisible" v-model="dialogVisible" :username="username"/>
  <teleport to="body">
    <transition name="fade-bottom" mode="out-in">
      <LockPage v-if="getIsLock"/>
    </transition>
  </teleport>
</template>

<style scoped lang="less">
.fade-bottom-enter-active,
.fade-bottom-leave-active {
  transition: opacity 0.25s,
  transform 0.3s;
}

.fade-bottom-enter-from {
  opacity: 0;
  transform: translateY(-10%);
}

.fade-bottom-leave-to {
  opacity: 0;
  transform: translateY(10%);
}
</style>
